import React from "react"
import Scrollbar from "react-scrollbars-custom"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faDownload, faPlane } from "@fortawesome/free-solid-svg-icons"
import { IAdditionalSpread } from "../types"
import { CONSTANTS, STYLES } from "../constants"
import { startModalAlert, getTimeDate } from "../common"

export const AdditionalSpread: React.FC<IAdditionalSpread> = props => {
	const {
		getSpreads,
		saveSpreads,
		handlerPopupWindow,
		spreads,
		scrollStyle,
	} = props

	const startState: any = {
		sortStatus: false,
		sortType: "up",
		baseAsset: "",
		spreads: [],
	}

	const handlerSpreads = (state: any, item: any, isSave: boolean) => {
		const arr = state.spreads.slice()
		if (isSave) {
			arr.push(item)
		} else {
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].itemId === item.itemId) arr.splice(i, 1)
			}
		}

		return arr
	}

	const [stateProps, handlerState] = React.useState(startState)

	const listRates =
		spreads.length === 0 ? (
			<tr>
				<td colSpan={12}>{CONSTANTS.ERROR_TEXT}</td>
			</tr>
		) : (
			spreads.map((item: any, index: number) => {
				return (
					<tr key={index}>
						<td>
							<div className="form-check form-check-inline">
								<input
									className="form-check-input"
									type="checkbox"
									id={`isSaveItem_${index}`}
									// checked={isChecked}
									onChange={(ev: any) => {
										handlerState({
											...stateProps,
											spreads: handlerSpreads(stateProps, item, ev.target.checked),
										})
										// console.log(ev.target.checked)
									}}
								/>
								<label
									className="form-check-label"
									htmlFor={`isSaveItem_${index}`}
								>
									{index + 1}
								</label>
							</div>
						</td>
						<td>{item.baseAsset}</td>
						<td>{item.spotExchange}</td>
						<td>{item.buyPrice}</td>
						<td>{item.futExchange}</td>
						<td>{item.sellPrice}</td>
						<td>{item.spread}</td>
						<td>{item.fundRate}</td>
						<td>{getTimeDate(item.createdAt)}</td>
					</tr>
				)
			})
		)

	return (
		<div className="container">
			<div className="row">
				<div className="form-label-group text-left">
					<input
						id="baseAsset"
						type="text"
						placeholder="Enter baseAsset"
						className="form-control"
						value={stateProps.baseAsset}
						onChange={(ev: any) => {
							handlerState({
								...stateProps,
								baseAsset: ev.target.value,
							})
						}}
					/>
				</div>
				<Scrollbar style={scrollStyle}>
					<table className="table table-hover table-striped table-sm">
						<thead>
							<tr>
								<th>#</th>
								<th className="text-left">
									{stateProps.baseAsset === "" ? (
										<>
											<button
												className="btn btn-outline-warning btn-sm"
												title="getSpreads()"
												onClick={() => {
													const objParams = {
														baseAsset: "",
														typeQuery: "allSpreadsFromTickers",
													}
													getSpreads(objParams)
												}}
											>
												<FontAwesomeIcon icon={faPlane} />
											</button>
											<button
												className="btn btn-outline-success btn-sm"
												title="saveSpreads()"
												// disabled
												onClick={() => {
													const objParams = { spreads: stateProps.spreads }
													if (stateProps.spreads.length !== 0) {
														saveSpreads(objParams)
														handlerState({
															...stateProps,
															spreads: [],
														})
													} else {
														handlerPopupWindow(STYLES.WARNING, "Spreads cannot be empty")
														startModalAlert()
													}
												}}
											>
												<FontAwesomeIcon icon={faDownload} />
											</button>
										</>
									) : (
										<>
											<button
												className="btn btn-outline-success btn-sm"
												title="baseAssetFromTickers"
												onClick={() => {
													const objParams = {
														baseAsset: stateProps.baseAsset,
														typeQuery: "baseAssetFromTickers",
													}
													getSpreads(objParams)
												}}
											>
												<FontAwesomeIcon icon={faPlane} />
											</button>
											<button
												className="btn btn-outline-info btn-sm"
												title="baseAssetFromSpreads"
												onClick={() => {
													const objParams = {
														baseAsset: stateProps.baseAsset,
														typeQuery: "baseAssetFromSpreads",
													}
													getSpreads(objParams)
												}}
											>
												<FontAwesomeIcon icon={faPlane} />
											</button>
											<button
												className="btn btn-outline-warning btn-sm"
												title="saveSpreads()"
												disabled
												onClick={() => {
													const objParams = { spreads }
													saveSpreads(objParams)
												}}
											>
												<FontAwesomeIcon icon={faDownload} />
											</button>
										</>
									)}
									<span className="ml-5">Coin</span>
								</th>
								<th>Spot</th>
								<th>BuySpot</th>
								<th>Fut</th>
								<th>SellFut</th>
								<th>Spread</th>
								<th>Funding</th>
								<th>dateTime</th>
							</tr>
						</thead>
						<tbody>{listRates}</tbody>
					</table>
				</Scrollbar>
			</div>
		</div>
	)
}
